<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>主页</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .el-header {
      background-color: #B3C0D1;
      color: #333;
      line-height: 60px;
    }

    .el-aside {
      color: #333;
    }

    .demo-table-expand {
      font-size: 0;
    }

    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-container style="height:100vh; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <!-- 侧边栏 -->
        <el-menu class="el-menu-vertical-demo" @select="handleSelect" background-color="#545c64" text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="1">
            <i class="el-icon-user"></i>
            <span slot="title">用户模块</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-goods"></i>
            <span slot="title">商品模块</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title">订单模块</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-s-comment"></i>
            <span slot="title">动态模块</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-info"></i>
            <span slot="title">其他模块</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- 内容区 -->
        <el-header style="text-align: right; font-size: 12px">
          <el-button v-show="activeIndex==1" @click="addUser" style="margin-right: 30px;" type="primary" plain>+ 新增用户
          </el-button>
          <el-button v-show="activeIndex==2" @click="addGood" style="margin-right: 30px;" type="primary" plain>+ 新增商品
          </el-button>
          <el-button v-show="activeIndex==3" @click="addOrder" style="margin-right: 30px;" type="primary" plain>+ 新增订单
          </el-button>
          <el-button v-show="activeIndex==4" @click="addDynamic" style="margin-right: 30px;" type="primary" plain>+ 新增动态
          </el-button>
          <el-button v-show="activeIndex==5" @click="addMsg" style="margin-right: 30px;" type="primary" plain>+ 新增消息
          </el-button>
          <el-button @click="showUploadImg" style="margin-right: 30px;" type="primary" plain>上传图片
          </el-button>
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>admin</span>
        </el-header>

        <el-main>

          <!-- 用户模块 -->
          <el-table :data="userData" v-show="activeIndex==1" highlight-current-row @current-change="handleCurrentChange"
            @row-dblclick="changeCell">
            <el-table-column type="index">
            </el-table-column>
            <el-table-column prop="uid" label="uid">
            </el-table-column>
            <el-table-column prop="username" label="用户昵称" width="200">
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="200">
            </el-table-column>
            <el-table-column prop="area" label="住址" width="200">
            </el-table-column>
            <el-table-column prop="image" label="头像" width="200">
            </el-table-column>
            <el-table-column prop="uemail" label="邮箱" width="200">
            </el-table-column>
            <el-table-column prop="del" label="是否删除" width="200">
            </el-table-column>
            <el-table-column prop="password" label="密码">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button icon="el-icon-delete" @click.native.prevent="deleteRow(scope, userData)" type="danger" plain>
                </el-button>
              </template>
            </el-table-column>

          </el-table>

          <!-- 商品模块 -->
          <el-table :data="goodData" v-show="activeIndex==2" highlight-current-row @row-dblclick="changeGoodCell">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="center" inline class="demo-table-expand">
                  <el-form-item label="商品id">
                    <span>{{ props.row.pid }}</span>
                  </el-form-item>
                  <el-form-item label="品牌">
                    <span>{{ props.row.brand }}</span>
                  </el-form-item>
                  <el-form-item label="价格">
                    <span>{{ props.row.price }}</span>
                  </el-form-item>
                  <el-form-item label="类型">
                    <span>{{ props.row.type }}</span>
                  </el-form-item>
                  <el-form-item label="销售量">
                    <span>{{ props.row.salecount }}</span>
                  </el-form-item>
                  <el-form-item label="性别">
                    <span>{{ props.row.sex }}</span>
                  </el-form-item>
                  <el-form-item label="系列">
                    <span>{{ props.row.series }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="商品ID" prop="pid">
            </el-table-column>
            <el-table-column label="商品名" prop="pname">
            </el-table-column>
            <el-table-column label="价格" prop="price">
            </el-table-column>
            <el-table-column label="风格" prop="style">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button icon="el-icon-delete" @click.native.prevent="deleteGood(scope, userData)" type="danger"
                  plain>
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 订单模块 -->
          <el-table :data="orderData" v-show="activeIndex==3" highlight-current-row @row-dblclick="changeOrderCell">
            <el-table-column prop="oid" label="订单号" width="140">
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="120">
            </el-table-column>
            <el-table-column prop="ostate" label="状态">
            </el-table-column>
            <el-table-column prop="oname" label="订单名" width="120">
            </el-table-column>
            <el-table-column prop="oarea" label="地址">
            </el-table-column>
            <el-table-column prop="ophone" label="电话">
            </el-table-column>
            <el-table-column prop="otime" label="时间">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button icon="el-icon-delete" @click.native.prevent="deleteOrder(scope, userData)" type="danger"
                  plain>
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 动态模块 -->
          <el-table :data="dynamicData" v-show="activeIndex==4" highlight-current-row @row-dblclick="changeDynamicCell">
            <el-table-column prop="mid" label="动态号" width="140">
            </el-table-column>
            <el-table-column prop="faid" label="faid" width="140">
            </el-table-column>
            <el-table-column prop="mtext" label="内容" width="140">
            </el-table-column>
            <el-table-column prop="did" label="did" width="140">
            </el-table-column>
            <el-table-column prop="uid" label="uid" width="140">
            </el-table-column>
            <el-table-column prop="pid" label="pid" width="140">
            </el-table-column>
            <el-table-column prop="mtime" label="时间" width="120">
            </el-table-column>
            <el-table-column prop="username" label="用户名">
            </el-table-column>
            <el-table-column prop="likenumber" label="点赞数">
            </el-table-column>
            <el-table-column prop="scancount" label="浏览量">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button icon="el-icon-delete" @click.native.prevent="deleteDynamic(scope, userData)" type="danger"
                  plain>
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 其他模块 -->
          <el-table :data="otherData" v-show="activeIndex==5">
            <el-table-column prop="id" label="id" width="140">
            </el-table-column>
            <el-table-column prop="text" label="消息内容">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button icon="el-icon-delete" @click.native.prevent="deleteMsg(scope, userData)" type="danger" plain>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>

    <!-- 上传图片弹出框 -->
    <el-dialog :visible.sync="uploadImg">
      <el-upload 
        action="http://lmx.free.idcfengye.com/product/uploadFile" 
        list-type="picture-card"
        :on-preview="handlePictureCardPreview" 
        :drag="true"
        :on-success="didUpload"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <!-- 新增用户弹出框 -->
    <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
      <el-form :model="newUser">
        <el-form-item label="用户名" :label-width="labelWidth">
          <el-input v-model="newUser.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="labelWidth">
          <el-input v-model="newUser.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="labelWidth">
          <el-select v-model.number="newUser.sex" placeholder="请选择性别">
            <el-option label="女" :value="Number(0)"></el-option>
            <el-option label="男" :value="Number(1)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址" :label-width="labelWidth">
          <el-input v-model="newUser.area" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="labelWidth">
          <el-input v-model="newUser.uemail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" :label-width="labelWidth">
          <el-input v-model="newUser.image" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改用户 -->
    <el-dialog title="修改用户信息" :visible.sync="changeUserHandler">
      <el-form :model="selectedUser">
        <el-form-item label="用户名" :label-width="labelWidth">
          <el-input v-model="selectedUser.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="labelWidth">
          <el-input v-model="selectedUser.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="labelWidth">
          <el-select v-model="selectedUser.sex" placeholder="请选择性别">
            <el-option label="女" value="1"></el-option>
            <el-option label="男" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址" :label-width="labelWidth">
          <el-input v-model="selectedUser.area" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="labelWidth">
          <el-input v-model="selectedUser.uemail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" :label-width="labelWidth">
          <el-input v-model="selectedUser.image" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeUserHandler = false">取 消</el-button>
        <el-button type="primary" @click="changeSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 商品弹出框 -->
    <el-dialog :title="goodOption.title" :visible.sync="goodOption.handler">
      <el-form :model="goodOption.goodInfo">

        <el-form-item label="商品名" :label-width="labelWidth">
          <el-input v-model="goodOption.goodInfo.pname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="labelWidth">
          <el-input v-model.number="goodOption.goodInfo.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="labelWidth">
          <el-input v-model="goodOption.goodInfo.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌" :label-width="labelWidth">
          <el-input v-model="goodOption.goodInfo.brand" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成交量" :label-width="labelWidth">
          <el-input v-model.number="goodOption.goodInfo.count" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="销售量" :label-width="labelWidth">
          <el-input v-model.number="goodOption.goodInfo.salecount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="风格" :label-width="labelWidth">
          <el-input v-model="goodOption.goodInfo.style" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="系列" :label-width="labelWidth">
          <el-input v-model="goodOption.goodInfo.series" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="goodOption.handler = false">取 消</el-button>
        <el-button type="primary" @click="goodSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 订单弹出框 -->
    <el-dialog :title="orderOption.title" :visible.sync="orderOption.handler">
      <el-form :model="orderOption.orderInfo">
        <el-form-item label="pid" :label-width="labelWidth">
          <el-input v-model="orderOption.orderInfo.oid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="labelWidth">
          <el-input v-model="orderOption.orderInfo.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="labelWidth">
          <el-input v-model="orderOption.orderInfo.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌" :label-width="labelWidth">
          <el-input v-model="orderOption.orderInfo.brand" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成交量" :label-width="labelWidth">
          <el-input v-model="orderOption.orderInfo.count" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="orderOption.handler = false">取 消</el-button>
        <el-button type="primary" @click="orderSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 动态弹出框 -->
    <el-dialog :title="dynamicOption.title" :visible.sync="dynamicOption.handler">
      <el-form :model="dynamicOption.dynamicInfo">
        <el-form-item label="faid" :label-width="labelWidth">
          <el-input v-model.number="dynamicOption.dynamicInfo.faid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="did" :label-width="labelWidth">
          <el-input v-model.number="dynamicOption.dynamicInfo.did" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="动态内容" :label-width="labelWidth">
          <el-input v-model.trim="dynamicOption.dynamicInfo.mtext" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="uid" :label-width="labelWidth">
          <el-input v-model.number="dynamicOption.dynamicInfo.uid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="pid" :label-width="labelWidth">
          <el-input v-model.number="dynamicOption.dynamicInfo.pid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="时间" :label-width="labelWidth">
          <el-input v-model="dynamicOption.dynamicInfo.mtime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名" :label-width="labelWidth">
          <el-input v-model="dynamicOption.dynamicInfo.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="点赞数" :label-width="labelWidth">
          <el-input v-model.number="dynamicOption.dynamicInfo.likenumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="浏览量" :label-width="labelWidth">
          <el-input v-model.number="dynamicOption.dynamicInfo.scancount" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dynamicOption.handler = false">取 消</el-button>
        <el-button type="primary" @click="dynamicSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 消息弹出框 -->
    <el-dialog :title="msg.title" :visible.sync="msg.handler">
      <el-form :model="msg.msgInfo">

        <el-form-item label="id" :label-width="labelWidth">
          <el-input v-model="msg.msgInfo.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="消息内容" :label-width="labelWidth">
          <el-input v-model="msg.msgInfo.mtext" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="msg.handler = false">取 消</el-button>
        <el-button type="primary" @click.native="msgSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <script>
    let app = new Vue({
      el: "#app",
      data() {
        return {
          upLoadUrl:[],
          uploadImg:false,
          dialogImageUrl: '',
          dialogVisible: false,
          selectedId: 0,
          selectedUser: {},
          labelWidth: '70px',
          activeIndex: '1',
          userData: [

          ],
          goodData: [
            {}, {}
          ],
          orderData: [],
          dynamicData: [{}, {}],
          otherData: [],
          dialogFormVisible: false, // 新增弹出框
          changeUserHandler: false,
          // 新增用户
          newUser: {
            username: '',
            password: '',
            sex: 0,
            area: '',
            image: '',
            uemail: '',
            del: 0,
            uid: 0
          },
          currentRow: null, // 用户选中行 
          // 商品弹出框设置
          goodOption: {
            title: "新增商品",
            handler: false,
            goodInfo: {
              pid: '',
              price: '',
              type: '',
              brand: '',
              count: '',
              pname: '',
              style: '',
              series: '',
              salecount: 0
            },
            url: ''

          },
          orderOption: {
            title: '新增订单',
            handler: false,
            orderInfo: {
              oid: 0,
              ostate: '',
              otime: '',
              oname: '',
              ophone: '',
              oarea: '',
              size: '',
              money: '',
              aid: '',
              uid: '',
              pid: '',
              del: 0
            },
            url: ''
          },
          dynamicOption: {
            title: '新增动态',
            handler: false,
            dynamicInfo: {
              faid: 0,
              did: 0,
              uid: 0,
              pid: 0,
              mtime: '',
              username: '',
              likenumber: '',
              scancount: 0,
            },
            url: ''
          },
          msg: {
            handler: false,
            title: '新增消息',
            msgInfo: {

            },
            url: ''
          }
        }
      },
      mounted() {
        // this.getUserData()
        // this.getOrderData()
        this.getGoodData()
        // this.getdynamicData()
      },
      methods: {
        // 切换tab
        handleSelect(key, keyPath) {
          this.activeIndex = key[0]
        },

        // 获取用户数据
        getUserData() {
          axios.get('http://5ycemc.natappfree.cc/user/getAllUsers').then(res => {
            this.userData = [...res.data]
          })
        },
        // 获取商品数据
        getGoodData() {
          axios.get('http://backstage123.free.idcfengye.com/product/getAllProduct').then(res => {
            this.goodData = [...res.data]
          })
        },
        // 获取订单数据
        getOrderData() {
          axios.get('http://5ycemc.natappfree.cc/orders/getAllOrders').then(res => {
            this.orderData = [...res.data]
            console.log(res.data)
          })
        },
        // 获取动态数据
        getdynamicData() {
          axios.get('http://8q5gac.natappfree.cc/message/getAllMessage').then(res => {
            this.dynamicData = [...res.data]
          })
        },

        handleCurrentChange(val) {
          this.currentRow = val
        },

        addUser() {
          this.dialogFormVisible = true
        },
        // 新增用户
        addSubmit() {
          axios.post('http://5ycemc.natappfree.cc/user/addUser', this.newUser).then(res => {
            this.$message({
              message: '用户添加成功',
              type: 'success'
            });
            this.dialogFormVisible = false

            this.getUserData()
          })
        },
        // 删除用户
        deleteRow({ row }, data) {
          let { uid } = row
          this.userData = this.userData.filter(el => el.uid != uid)
          // url
          axios.get('http://5ycemc.natappfree.cc/user/removeUsers', {
            params: {
              uid
            }
          })
        },
        changeCell(row) {
          this.changeUserHandler = true
          this.selectedUser = { ...row }
          this.selectedId = row.uid
        },

        // 修改用户
        changeSubmit() {
          axios.post('http://5ycemc.natappfree.cc/user/modifyUser', {
            ...this.selectedUser
          }).then(res => {
            this.$message({
              message: '用户修改成功',
              type: 'success'
            });
            this.changeUserHandler = false
            this.getUserData()
          })
        },

        // 新增商品显示
        addGood() {
          this.goodOption = {
            title: "新增商品",
            handler: true,
            goodInfo: {
              pname:'',
              price: '',
              type: 0,
              brand: '',
              count: '',
              del: 0,
              series: '',
              salecount:0
            },
            // 新增商品的请求地址
            url: 'http://backstage123.free.idcfengye.com/product/addProduct'
          }
        },
        changeGoodCell(row) {
          this.goodOption = {
            title: "修改商品",
            handler: true,
            goodInfo: {
              ...row,
              del: 0
            },
            // 修改的请求地址
            url: 'http://backstage123.free.idcfengye.com/product/modifyProduct'
          }
        },
        goodSubmit() {
          console.log(this.goodOption.url)
          axios.post(this.goodOption.url, {
            ...this.goodOption.goodInfo,
            photos:this.upLoadUrl
          }).then(res => {
            if (res.data.status == true) {
              this.$message({
                message: '提交成功',
                type: 'success'
              });
            } else
              this.$message.error('提交失败，请检查你的网络');
            this.goodOption.handler = false
            this.getGoodData()
          })
        },
        deleteGood({ row }, data) {
          let { pid } = row
          this.goodData = this.goodData.filter(el => el.pid != pid)
          // url
          axios.get('http://8q5gac.natappfree.cc/product/removeProduct', {
            params: {
              pid
            }
          }).then(res => {
            console.log(res)
          })
        },
        // 修改订单
        changeOrderCell(row) {
          this.orderOption = {
            title: "修改订单",
            handler: true,
            orderInfo: {
              ...row
            },
            // 修改的请求地址
            url: ''
          }
        },
        addOrder() {
          this.orderOption = {
            title: "新增订单",
            handler: true,
            goodInfo: {
              pid: '',
              price: '',
              type: '',
              brand: '',
              count: '',
            },
            // 修改的请求地址
            url: ''
          }
        },
        orderSubmit() {
          axios.post(this.orderOption.url, {
            data: this.orderOption.orderInfo
          }).then(res => {
            if (res.data == 'true') {
              this.$message({
                message: '提交成功',
                type: 'success'
              });
            } else
              this.$message.error('提交失败，请检查你的网络');
          })
        },
        deleteOrder({ row }, data) {
          let { oid } = row
          this.orderData = this.orderData.filter(el => el.oid != oid)
          // url
          axios.get('http://5ycemc.natappfree.cc/orders/removeOrders', {
            params: {
              oid
            }
          }).then(res => {
            console.log(res)
          })
        },


        // 动态模块
        changeDynamicCell(row) {
          this.dynamicOption = {
            title: "修改动态",
            handler: true,
            dynamicInfo: {
              ...row
            },
            // 修改的请求地址
            url: 'http://8q5gac.natappfree.cc/message/modifyMessage'
          }
        },
        addDynamic() {
          this.dynamicOption = {
            title: "新增动态单",
            handler: true,
            dynamicInfo: {
              pid: 0,
              faid: 0,

            },
            // 修改的请求地址
            url: 'http://8q5gac.natappfree.cc/message/addMessage'
          }
        },
        dynamicSubmit() {
          axios.post(this.dynamicOption.url, {
            ...this.dynamicOption.dynamicInfo,
            del: 0
          }).then(res => {
            if (res.data.status == true) {
              this.$message({
                message: '提交成功',
                type: 'success'
              });
            } else
              this.$message.error('提交失败，请检查你的网络');
          })
        },
        deleteDynamic({ row }, data) {
          let { mid } = row
          this.dynamicData = this.dynamicData.filter(el => el.mid != mid)
          // url
          axios.get('http://8q5gac.natappfree.cc/message/removeMessage', {
            params: {
              mid
            }
          }).then(res => {
            if (res.data.status == true) {
              this.$message({
                message: '提交成功',
                type: 'success'
              });
            } else
              this.$message.error('提交失败，请检查你的网络');
          })
        },

        // 消息模块
        addMsg() {
          this.msg = {
            handler: true,
            title: '新增消息',
            msgInfo: {
              id: '',
              del: 0,
              mtext: ''
            },
            url: ''
          }
        },
        changeMsgCell() {
          this.msg = {
            handler: true,
            title: '修改消息',
            msgInfo: {
              id: '',
              del: 0,
              mtext: ''
            },
            url: ''
          }
        },
        msgSubmit() {
          axios.get('http://8q5gac.natappfree.cc/message/removeMessage', {
            params: {
              mid
            }
          }).then(res => {
            if (res.data.status == true) {
              this.$message({
                message: '提交成功',
                type: 'success'
              });
            } else
              this.$message.error('提交失败，请检查你的网络');
          })
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        showUploadImg(){
          this.uploadImg = true
        },
        didUpload(res){
          this.upLoadUrl.push(res)
        }
      },
    })
  </script>
</body>

</html>